<script setup lang="ts">
import { provide, computed ,onMounted} from 'vue'
import { useRoute } from 'vue-router'
import {getCurrentLocation} from '@/utils/index'

const route = useRoute()
const activeMenu = computed(() => {
  if (route.params.id) {
    return route.params.id as string
  } else if (route.fullPath.includes('home')) {
    return '-1'
  } else if (route.fullPath.includes('chat')) {
    return '8'
  } else if (route.fullPath.includes('follow')) {
    return '7'
  }else{
    return '-999'
  }
})

const location = ref({longitude:-1,latitude:-1})
onMounted(async()=>{
  location.value = await getCurrentLocation()
})


provide('activeMenu', activeMenu)
</script>

<template>
  <div class="w-full mx-auto bg-[#F0F2F5] main_container">
    <Header class="main_header" :activeMenu="activeMenu" />
    <div class="main_content">
      <RouterView />
    </div>
    <Fixed />
  </div>
</template>

<style lang="scss" scoped>
.main_container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  .main_header {
    position: fixed;
    z-index: 10;
  }

  .main_content {
    flex: 1;
    width: 80%;
    padding-top: 80px;
    margin: auto;
  }
}
</style>
